<template>
    <div>
        <el-button type="primary" style="margin-bottom: 10px" @click="addRow">新增分类</el-button>
        <!-- 分类管理 -->
    <el-dialog v-model="dialogVisible" :title="id?'修改分类':'新增分类'" :before-close="handleBeforeClose"> 
        <CategoryEdit ref="categoryForm" :id="id" @success="editSuccess" ></CategoryEdit>
    </el-dialog>
        <el-table ref="tableRef" :data="tableData" style="margin-bottom: 20px" row-key="id" border>
            <el-table-column prop="name" label="分类名称" sortable />
            <el-table-column label="分类级别">
                <template #default="{ row }">
                    <span v-if="row.pid == 0">一级分类</span>
                    <span v-else>二级分类</span>
                </template>
            </el-table-column>
            <el-table-column prop="id" label="分类编号" />
            <el-table-column label="分类图片">
                <template #default="{ row }">
                    <el-image v-if="row.picture != ''" :src="row.picture" fit="contain" style="display: flex; align-items: center; height: 60px" />
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="180">
                
                <template #default="{ row }">
                    <el-button type="warning" @click="editRow(row)">编辑</el-button>
                    <el-button type="danger" @click="delRow(row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    
    </div>
</template>



<script setup>

    
import { getCategoryList,delCategory} from '../../api/api'
import { ElMessageBox, ElMessage } from 'element-plus'
import {
    ref,
    onMounted
} from 'vue'
import CategoryEdit from '../../components/CategoryEdit.vue';
// const id = ref(0) 
// const dialogVisible=ref(false)
// const tableData=ref([])
// onMounted(async () => {
//     loadCategoryList()
// })

// const loadCategoryList=async ()=>{
//     const data=await getCategoryList()
//     tableData.value=convertToTree(data);
// }
// const convertToTree=data=>{
//     const treeData=[]
//     const map={}
//     for(const item of data){
//         map[item.id]={...item,children:[]}

//     }
//     for(const item of data){
//         const node=map[item.id];
//         if(item.pid===0){
//             treeData.push(node);
//         }else{
//             const parent=map[item.pid];
//             if(parent){
//                 parent.children.push(node)
//             }
//         } 
//     }
//     return treeData
// }



// const delRow=row=>{
//     if(row.pid===0 && row.children.length!==0){
//         ElMessage({
//             type:'warning',
//             message:'存在二级分类，请先删除完所有二级分类再删除此类'
//         })
//     }else{
//     ElMessageBox.confirm("确定删除此类",{
//         closeOnClickModel:false,
//         confirmButtonText:'确定',
//         cancelButtonText:'取消'
//     }).then(async ()=>{
//         if(await delCategory({id:row.id})){
//             loadCategoryList()
//         }
//     }).catch(()=>{})
//     }
// }


// const editSuccess=()=>{
//     dialogVisible.value=false
//     loadCategoryList()
// }
// // 添加
// const categoryForm=ref()
// const addRow=()=>{
//     if(categoryForm.value){
//         categoryForm.value.resetForm(0)
//     }
//     id.value=0
//     dialogVisible.value=true
// }
// //编辑
// const editRow=row=>{
//     if(categoryForm.value){
//         categoryForm.value.resetForm(row.id)

//     }
//     id.value=row.id
//     dialogVisible.value=true
// }
// const handleBeforeClose=()=>{
//     ElMessageBox.confirm('确定关闭对话框吗',{
//         showClose:false,
//         closeOnClickModel:false,
//         confirmButtonText:'确定',
//         cancelButtonText:'取消'
//     }).then(()=>{
//         dialogVisible.value=false
//     }).catch(()=>{

//     }) 
// }

const tableData=ref([])
onMounted(()=>{
loadCategoryList()
})
const loadCategoryList=async()=>{
    const data=await getCategoryList()
    tableData.value=convertToTree(data)
}
const convertToTree=data=>{
    const treeData=[]
    const map={}
    for(const item of data){
        map[item.id]={...item,children:[]}
    }
    for(const item of data){
        const node=map[item.id]
        if(item.pid===0){
            treeData.push(node)
        }else{
            const parent=map[item.pid]

            if(parent){
                parent.children.push(node)
            }
        }
        
    }
return treeData
}

//对话框
const dialogVisible=ref(false)
const handleBeforeClose=()=>{
    ElMessageBox.confirm("确定关闭对话框",{
        showClose:false,

        closeOnClickModal:false,
        confirmButtonText:"确定",
        cancelButtonText:"取消"
    }).then(()=>{
        dialogVisible.value=false
    }).catch(()=>{

    })
}
const editSuccess=()=>{
    dialogVisible.value=true
    loadCategoryList()
}
//del
const delRow=row=>{
    if(row.pid===0  && row.children.length!==0){
        ElMessage({
            type:"warning",
            message:"请。。。再删除"
        })
    }
    else{
        ElMessageBox.confirm("确定删除吗",{
            closeOnClickModal:false,
            confirmButtonText:"确定",
            cancelButtonText:"取消"
        }).then(async()=>{
            if(await delCategory({id:row.id})){
                loadCategoryList()
            }
    }).catch(()=>{

    })
    }
}
// add edit
const id=ref(0)
const categoryForm=ref()
const addRow=()=>{
    id.value=0
    dialogVisible.value=true
    if(categoryForm.value){
        categoryForm.value.resetForm(0)
    }
   
}

const editRow=row=>{
    id.value=row.id
    dialogVisible.value=true
    if(categoryForm.value){
        categoryForm.value.resetForm(row.id)
    }
   
}
</script>
